<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('科目一模拟考试')"></head>
<head>
    <link rel="stylesheet" th:href="@{/css/front/subject-one-test.css}">
</head>
<body>
    <!-- 引入公共的导航部分 -->
    <header th:include="common/common :: common_header('','科目一模拟考试')"></header>
    <!-- 页面主题内容部分 -->
    <article id="change-content">
        <div class="layui-container">
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md2">

                    <div class="layui-card left-panel">
                        <div class="layui-card-header" style="text-align: center"><h2>身份证号</h2></div>
                        <div class="layui-card-body" style="text-align: center">
                            <div>[[${session.user == null ? '未登录' : session.user.userNumber}]]</div>
                        </div>
                    </div>

                    <div class="layui-card left-panel left-panel-middle">
                        <div class="layui-card-header" style="text-align: center"><h2>考生信息</h2></div>
                        <div class="layui-card-body" style="text-align: center">
                            <div  th:if="${session.get('user') == null}">
                                <img src="http://localhost:8080/image/front/face_nomal.png" width="90%" height="90%" alt="">
                            </div>
                            <div  th:if="${session.get('user') != null}">
                             <img :src="userImage" width="90%" height="90%" alt="">
                            </div>
                        </div>
                        <div class="layui-card-body" style="text-align: center;font-size: 18px;margin-top: 80px;">
                            <div><span>姓名：</span>[[${session.user == null ? '未登录' : session.user.userName}]]</div>
                            <div><span>类型：</span>小汽车</div>
                            <div><span>科目：</span>科目一</div>
                        </div>
                    </div>

                    <div class="layui-card left-panel">
                        <div class="layui-card-header" style="text-align: center"><h2>剩余时间</h2></div>
                        <div class="layui-card-body" style="text-align: center">
                            <button type="button" class="layui-btn layui-btn-danger" style="font-size: 22px;width: 140px;">{{ hour < 10 ? '0'+hour : hour }}:{{ minute < 10 ? '0'+minute : minute }}:{{ second < 10 ? '0'+second : second }}</button>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="layui-card middle-panel middle-panel-head">
                        <div class="layui-card-header">
                            <span style="font-weight: bolder">题目信息：</span>
                            <span style="font-weight: bolder">第 {{current}} 题/共 {{total}} 题</span>
                            <span>
                                {{questionTopic}}
                            </span>
                        </div>
                        <div class="layui-card-body" style="font-size: 14px;">
                            <div class="input-radio" v-if="questionA"><input name="answer" v-model="answer" :type="type" value="A">&nbsp;&nbsp;<span>A： {{questionA}}</span></div>
                            <div class="input-radio" v-if="questionB"><input name="answer" v-model="answer" :type="type" value="B">&nbsp;&nbsp;<span>B： {{questionB}}</span></div>
                            <div class="input-radio" v-if="questionC"><input name="answer" v-model="answer" :type="type" value="C">&nbsp;&nbsp;<span>C： {{questionC}}</span></div>
                            <div class="input-radio" v-if="questionD"><input name="answer" v-model="answer" :type="type" value="D">&nbsp;&nbsp;<span>D： {{questionD}}</span></div>
                            <div class="input-radio" v-if="questionE"><input name="answer" v-model="answer" :type="type" value="E">&nbsp;&nbsp;<span>E： {{questionE}}</span></div>
                            <div class="input-radio" v-if="questionF"><input name="answer" v-model="answer" :type="type" value="F">&nbsp;&nbsp;<span>F： {{questionF}}</span></div>
                            <div class="input-radio" v-if="questionG"><input name="answer" v-model="answer" :type="type" value="G">&nbsp;&nbsp;<span>G： {{questionG}}</span></div>
                            <br>
                            <div>
                                <img :src="questionImage" style="width: 200px;" alt="">
                            </div>
                            <div v-if="questionImage"><button type="button" class="layui-btn layui-btn-primary" @click="seeBigImage" style="width: 200px">点击查看大图</button></div>
                        </div>
                    </div>
                    <div class="layui-card middle-panel">
                        <div class="layui-card-header"><span style="font-weight: bolder">答题操作</span></div>
                        <div class="layui-card-body">
                            <button type="button" @click="getNextQuestion(prePage,pre)" class="layui-btn">上一题</button>
                            <button type="button" @click="getNextQuestion(nextPage,next)" class="layui-btn">下一题</button>
                            <button type="button" @click="checkAnswer(answer,current)" class="layui-btn">提交答案</button>
                            <button type="button" @click="handPaper" class="layui-btn">交卷</button>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="layui-card right-panel">
                        <div class="layui-card-header" style="text-align: center">答题结果</div>
                        <div class="layui-card-body layui-btn-group">
                            <button type="button" style="border-left: 1px solid darkgray;" @click="getNextQuestion(index+1,appoint)" v-for="(id,index) in questionIds" class="layui-btn layui-btn-primary button-item">{{index+1}}</button>
                        </div>
                    </div>

                    <div class="layui-card right-middle-panel" style="text-align: center">
                        <div class="layui-card-header"><span style="font-weight: bolder">温馨提示</span></div>
                        <div class="layui-card-body">
                            <button type="button" class="layui-btn layui-btn-primary">考试严禁作弊，一旦发现，取消考试资格！</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
</body>
</html>
<script>
   const vue = new Vue({
        el: "#change-content",
        data: {
            score: 0, //考试得分
            total: 0, //总问题数目
            current: 0, //当前问题的数标
            next: 'next', //下一题
            pre: 'pre', //上一题
            appoint: 'appoint', //指定条件
            remainTime: '[[${time_limit}]]', //考试的限制时间,单位秒
            fraction: '[[${fraction}]]',
            userTime: 0,//考试所用时间
            hour:0, //小时
            minute:0, //分钟
            second:0, //秒
            type: 'radio', //input的属性
            questionTopic: '',//当前问题的题目
            questionId: '',//当前题目的ID
            questionA: '',//存储选项A的内容
            questionB: '',//存储选项B的内容
            questionC: '',//存储选项C的内容
            questionD: '',//存储选项D的内容
            questionE: '',//存储选项E的内容
            questionF: '',//存储选项F的内容
            questionG: '',//存储选项G的内容
            questionType: '',//当前问题的类型
            answer: [],//用户选择的答案
            questionAnswer: '',//题目的正确答案
            questionImage: '',//题目的照片
            nextPage: 1,//下一题
            prePage: 1,//上一题
            questionIds:[], //用来存储题目的ID
            userImage:'',
        },
        methods:{
            getMyInformation: function (){
                let _this = this;
                _this.$http.get('/user/getMyInformation').then(function (user){
                    let user_json = JSON.parse(user.body);
                    _this.userImage = user_json.userImage;

                });
            },
            //计时用的函数
            countDown: function (){
                let _this = this
                this.promiseTimer = setInterval(function () {
                    _this.userTime++;
                    if(_this.hour == 0 && _this.minute == 0 && _this.second == 0){
                        _this.stop();
                    }
                    if (_this.hour === 0) {
                        if (_this.minute !== 0 && _this.second === 0) {
                            _this.second = 59
                            _this.minute -= 1
                        } else if (_this.minute === 0 && _this.second === 0) {
                            _this.second = 0
                            _this.$emit('countDownEnd', true)
                            clearInterval(_this.promiseTimer)
                        } else {
                            _this.second -= 1
                        }
                    } else {
                        if (_this.minute !== 0 && _this.second === 0) {
                            _this.second = 59
                            _this.minute -= 1
                        } else if (_this.minute === 0 && _this.second === 0) {
                            _this.hour -= 1
                            _this.minute = 59
                            _this.second = 59
                        } else {
                            _this.second -= 1
                        }
                    }
                }, 1000);
            },
            //停止计时，并停止用户的答卷
            stop: function (){
                let _this = this;
                clearInterval(_this.promiseTimer)
                alert("时间已经用完，系统自动交卷");
                _this.handPaper();
            },
            //查看问题的大图片
            seeBigImage: function (){
                layui.use('layer', function(){
                    const layer = layui.layer;
                    layer.open({
                        type: 1,
                        area: '1000px',
                        moveOut: true,
                        shadeClose: true,
                        content: `<img src="${vue.questionImage}" width="920" style="margin: 40px">`,
                    });
                });
            },
            //获取下一个问题
            getNextQuestion: function (index,flag){

                let _this = this;
                _this.answer = [];
                //清除input的选中状态
                let radios = document.getElementsByName("answer");
                for (let i =0;i<radios.length;i++){
                    radios[i].checked=false;
                }
                //判断是不是最后一题
                if (_this.current === _this.total && _this.total !== 0 && flag === 'next'){
                    alert("已经是最后一题");
                }else if(_this.current === 1 && flag === 'pre'){
                    alert("已经是第一题");
                }else {
                    _this.$http.get('/question/getTestQuestion/1/'+index).then(function (page){
                        let page_json = JSON.parse(page.body);
                        console.log(_this.questionIds[index-1]);
                        _this.questionTopic =_this.questionIds[index-1].questionTopic;
                        _this.questionA = _this.questionIds[index-1].questionA;
                        _this.questionB = _this.questionIds[index-1].questionB;
                        _this.questionC = _this.questionIds[index-1].questionC;
                        _this.questionD = _this.questionIds[index-1].questionD;
                        _this.questionE = _this.questionIds[index-1].questionE;
                        _this.questionF = _this.questionIds[index-1].questionF;
                        _this.questionG = _this.questionIds[index-1].questionG;
                        _this.questionAnswer = _this.questionIds[index-1].questionAnswer;
                        _this.questionExplain = _this.questionIds[index-1].questionExplain;
                        _this.questionType =_this.questionIds[index-1].questionType;
                        _this.questionImage =_this.questionIds[index-1].questionImage;
                        _this.current = page_json.current;
                        _this.total = page_json.size;
                        _this.nextPage = _this.current + 1;
                        _this.prePage = _this.current - 1;
                        if (_this.questionType === 3){
                            _this.type = 'checkbox';
                        }else{
                            _this.type = 'radio';
                        }
                    },function (){
                        alert("请求失败");
                    })
                }
            },
            //获取全部问题的ID
            getQuestionId: function (){
                let _this = this;
                _this.$http.get('/question/getTestQuestionIds/1').then(function (data){
                    _this.questionIds = JSON.parse(data.body);

                })
            },
            //校验用户选中的答案
            checkAnswer: function (answer,current){
                let _this = this;
                let fraction = vue.fraction;
                let button_array = document.getElementsByClassName("button-item");
                let index = current - 1;
                //判断是否是多选，如果是多选，将数组转换成字符串
                if (_this.type === 'checkbox'){
                    answer =_this.answer.join("");
                }
                if (answer == ""){
                    alert("您未选择答案");
                    return;
                }
                if(_this.questionAnswer === answer){
                    button_array[index].style.backgroundColor = 'green';
                    //分数加一
                    for (let i = 0; i < fraction; i++){
                        _this.score+= 1;
                    }

                }else {
                    button_array[index].style.backgroundColor = 'red';
                }
                button_array[index].style.color = 'white';
                _this.getNextQuestion(_this.nextPage,_this.next)
            },
            //交卷
            handPaper: function (){
                let _this = this;
                //向后台异步发送成绩记录
                _this.$http.get('/grade/insertGrade',{params:{gradeScore: _this.score,gradeExamTime: _this.userTime,gradeSubject: 1}},{//记录成绩以及考试科目
                    emulateJSON:true
                }).then(function (result){
                    alert(result.body);
                    if(result.body =="成绩已被记录"){
                        window.location.href="/page/testResult/"+_this.score+"/"+_this.userTime+"/one";
                    }
                });
            },
        },
        mounted: function (){
            layui.use('layer',function (){
                const layer = layui.layer;
                const  index = layer.open({
                    type: 1
                    ,title: false //不显示标题栏
                    ,closeBtn: false
                    ,area: '600px;'
                    ,shade: 0.8
                    ,id: 'notice_test' //设定一个id，防止重复弹出
                    ,btn: ['开始考试', '我在想想']
                    ,btnAlign: 'c'
                    ,content: `<div style="padding: 50px; line-height: 22px; background-color: #393D49; font-weight: 300;">
                                   <ul class="layui-timeline">
                                       <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text" style="color: white">
                                          <h2 class="layui-timeline-title" style="color: white">考试须知</h2>
                                          <p>根据公安部第91号令《机动车驾驶证申领和使用规定》和公安部有关驾驶人考试工作纪律规定，严肃我市机动车驾驶人考试工作纪律，
                                          体现驾驶人考试公开、公平、公正，进一步规范和完善驾驶人考试工作，营造良好的考试氛围，确实保障广大学员的合法权益。特制定如下规定:</p>
                                          <ul>
                                            <li>考生必须在考评人员的安排下，按序号持准考证和本人身份证进入考场。</li>
                                            <li>考生不得携带任何已加工过的类似考件进入考场。</li>
                                            <li>考生入场后必须保持安静，不得在场内随意走动。</li>
                                            <li>考生必须按照有关规定，正确佩戴劳动防护用品</li>
                                            <li>考生不准提示、指导、代替其他考生制作或加工考件。</li>
                                            <li>考生必须严格遵守考场管理制度；不准吸烟，不准交头接耳，不准窃视，不准交换考号、转抄、夹带资料、冒名顶替、不准有其它舞弊行为。严禁使用任何移动通讯工具，一经查出取消当次考试资格，当次考试成绩作零分处理。</li>
                                            <li>考生不得在考试中途离开考场，离开考场者不能再进场续考。答题提交确认后不准滞留考场或在考场附近大声喧哗和逗留。</li>
                                            <li>考试终止时间到后，考试系统会自动提交试卷，考生应立即退出考场。</li>
                                          </ul>
                                        </div>
                                      </li>
                                   <ul/>
                               </div>`
                    ,
                    yes: function(index, layero){
                        if (vue.remainTime > 0) {
                            vue.hour = Math.floor((vue.remainTime / 3600) % 24);
                            vue.minute = Math.floor((vue.remainTime / 60) % 60);
                            vue.second = Math.floor(vue.remainTime % 60);

                            vue.countDown();
                        }
                        layer.close(index);
                        vue.getNextQuestion(vue.nextPage,vue.next);

                    }
                    ,btn2: function (index, layero){
                        window.location.href = "/page/frontIndex";
                    }
                });

            });
            this.getQuestionId();
            this.getMyInformation();
        }
    })
</script>
